@extends('layouts.header')
@section('style')
    table .check-box {
    padding-left: 18px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    }

    tbody tr:hover {
    cursor: pointer;
    /* background-color: #dee; */
    }
@endsection
@section('content')
    <div class="page-container">
        <div class="panel panel-primary">
            <div class="panel-header">检测项目 &nbsp;&nbsp;&nbsp;&nbsp;（点击项目标题获取项目数据）</span></div>
            <div class="panel-body">
                <div class="skin-minimal" id="test_items">
                </div>
            </div>
        </div>
        <div class="panel panel-primary mt-10">
            <div class="panel-header" id="item-content-header">
                结果录入
            </div>
            <div class="panel-body">
                <div class="skin-minimal">
                    <form class="form form-horizontal hidden" id="item-content">
                        <input type="hidden" name="gyId" value="">
                        <input type="hidden" name="item_id" value="">
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2"><b class="c-blue">检验标准</b></label>
                            <div class="formControls col-xs-8 col-sm-9" id="test-stad">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2"><b class="c-blue">分配时间</b></label>
                            <div class="formControls col-xs-8 col-sm-9" id="allot-time">
                            </div>
                        </div>
                        <div class="row cl">
                            <label class="form-label col-xs-4 col-sm-2"><b class="c-blue">原始记录</b></label>
                            <div class="formControls col-xs-8 col-sm-9" id="log">
                                <div class="row cl">
                                    <div class="col-xs-6" id="log-weather">
                                        <div class="row cl">
                                            <label class="form-label col-xs-4"><b>天气：</b></label>
                                            <div class="formControls col-xs-5">
                                                <input type='text' class="input-text" name="wea" value=''>
                                            </div>
                                        </div>
                                        <div class="row cl">
                                            <label class="form-label col-xs-4"><b>大气压力：</b></label>
                                            <div class="formControls col-xs-5">
                                                <input type='text' class="input-text" name="pressure" value=''>
                                            </div>
                                            <label class="t-a-l col-xs-3">kPa</label>
                                        </div>
                                        <div class="row cl">
                                            <label class="form-label col-xs-4"><b>环境温度：</b></label>
                                            <div class="formControls col-xs-5">
                                                <input type='text' class="input-text" name="temp" value=''>
                                            </div>
                                            <label class="t-a-l col-xs-3">℃</label>
                                        </div>
                                        <div class="row cl">
                                            <label class="form-label col-xs-4"><b>相对湿度：</b></label>
                                            <div class="formControls col-xs-5">
                                                <input type='text' class="input-text" name="hum" value=''>
                                            </div>
                                            <label class="t-a-l col-xs-3">%</label>
                                        </div>
                                    </div>
                                    <div class="col-xs-6" id="log-item"></div>
                                </div>

                                <div class="row cl">
                                    <label class="form-label col-xs-3"><b>备注/不符合现象描述：</b></label>
                                    <div class="formControls col-xs-9">
                                        <input class="textarea" name="remark">
                                    </div>
                                </div>

                                <div class="row cl">
                                    <div class="col-xs-6">
                                        <label class="form-label col-xs-6"><b>试验日期：</b></label>
                                        <div class="formControls col-xs-6">
                                            <input type="text" name="utime" value="{{date('Y-m-d')}}" onfocus="WdatePicker({value:'%y-%M-%d'})" class="input-text Wdate">
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <label class="form-label col-xs-6"><b>检测结果：</b></label>
                                        <div class="formControls col-xs-6">
                                            <select class="input-text" name="res">
                                                <option value="1">符合</option>
                                                <option value="0">不符合</option>
                                                <option value="3">/</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="row cl text-c">
                                    <a class="btn btn-primary radius" id="submitForm">保 存</a>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="mt-10">
            <table class="table table-border table-bordered table-hover table-bg table-responsive" id="datatable">
                <thead>
                <tr class="text-c">
                    <th>条形码</th>
                    <th>样品名称</th>
                    <th>分类</th>
                    <th>额定电压</th>
                    <th>执行标准</th>
                    <th width='20%' class="text-c">试验项目</th>
                    <th>数量</th>
                    <th>主检人</th>
                    <th>分配结果</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>

    <script type="text/javascript">
        var table;
        $(function () {

            $.fn.dataTable.ext.errMode = 'throw';//datatable抛异常的方式，在console中输出，默认以alert的方式弹出
            table = $('#datatable').DataTable({
                order: [[6, 'desc']],//默认第几个排序
                ordering: false, // 是否排序
                // "pageLength": 2,
                // "stateSave": true,// 状态保存 - 再次加载页面时还原表格状态
                // "stateDuration": -1,//仅保留当前会话的数据
                // "paging":false, //禁用分页
                // serverSide: true,//服务器端处理模式——此模式下如：过滤、分页、排序的处理都放在服务器端进行。
                // responsive: true,//响应式，需要插件
                // fixedHeader: true,//表头固定，需要插件
                // autoWidth: false,
                "deferRender": true,//延迟渲染速度
                ajax: "{{url()->full()}}",//客户端分页时，必须写url
                processing: true,//加载数据时候是否显示进度条
                language: {url: '/admin/lib/datatables/dataTables_Chinese_Lang.json'},
                /* createdRow : function( row, data, dataIndex ) {
                    //当tr元素被创建（所有的td元素已经插入进去），或者给tr绑定事件，该回调函数被执行
                    $(row).addClass( 'text-c' );
                },
                initComplete : function (settings, json) {
                    //当表格完成加载绘制完成后执行此方法
                    // $(row).addClass( 'text-c' );
                    // alert(111);
                }, */
                columns: [
                    {data: "bar_codes", class: "text-c", searchable: false, orderable: false},//条形码 1
                    {
                        data: "tool_name",
                        class: "text-c tool_name",
                        orderable: false,
                        render: function (data, type, row, meta) {
                            return '<span data-id="' + row.id + '">' + row.tool_name + '</span>';
                        }
                    },//样品名称 2
                    {data: "class", class: "text-c"},//分类 3
                    {data: "voltage", class: "text-c", orderable: false},//电压等级 4
                    {data: "std_num", class: "text-c"},//执行标准 5
                    {data: "item_names", class: "text-l"},//试验项目 6
                    {
                        data: "count", class: "text-c", render: function (data, type, row, meta) {
                            return row.count + ' ' + row.unit;
                        }
                    },//数量 7
                    {data: "managers", class: "text-c managers"},//主检人
                    {
                        data: "id", class: "text-c", orderable: false, render: function (data, type, row, meta) {
                            return '<a class="ml-5 btn btn-primary radius size-MINI" href="javascript:;" onclick="view(' + row.id + ',800,400)">查看</a>';
                        }
                    },//操作 - 分配结果
                ],
            });

            /*  draw  在表格完成绘制后触发*/
            table.on('draw', function () {
                var info = table.page.info();
                //如果最后一页仅剩一条记录，而且不是在第一页
                if ((info.start == info.end) && info.end > 1) {
                    //跳转到上一页
                    $('#datatable_previous').click();
                }

                $('#btn_assign').attr('data-id', '0');
                $('#btn_assign').addClass('disabled');
                $('#test_items').html('');
                $("tbody tr").css("background-color", "#fff");

                $("tbody tr").click(function () {
                    $('#item-content').addClass('hidden');
                    $("tbody tr").css("background-color", "#fff");
                    $(this).css("background-color", "#dee");
                    var id = $(this).find("td.tool_name span").attr('data-id');
                    $('#item-content').find('input[name=gyId]').val(id);
                    $('#btn_assign').attr('data-id', id);
                    $('#btn_assign').removeClass('disabled');
                    $('#test_items').html('');
                    if($(this).find("td.managers").text() === ''){
                          layer.msg('必须先分配任务！');
                          return false;
                    }
                    //发送ajax 请求，获取当前行的检测项目
                    $.get('/{{config('constant.name_admin')}}/myapi/getItemByContractGaiyaoId', {id: id}, function (data) {
                        //jQuery的循环操作
                        var str = '';
                        $.each(data, function (index, el) {
                            str += '<label onclick="getItemData(this,' + id + ')" class="ml-10"><input name="item" type="radio" value="' + el.id + '" >' + el.name + '</label>&emsp;';
                        });
                        //将数据放到对应的option之后
                        $('#test_items').html(str);
                    }, 'json');
                });
            });
        });

        $('#item-content-header').on('click', function () {
            $('#item-content').hasClass('hidden') ? $('#item-content').removeClass('hidden') : $('#item-content').addClass('hidden');
        });

        $('#submitForm').on('click', function () {
            ajax('post', 'itemDataSub', $('#item-content').serialize(), submitFormBak, 1);
            function submitFormBak(res) {
                if (res.code == 1) {
                    layer.msg("保存成功！")
                }
            }
        });

        function getItemData(ele, gyId) {
            $('#item-content').removeClass('hidden');
            let itemId = $(ele).find('input').val(), params = {itemId: itemId, gyId: gyId};
            $('#item-content').find('input[name=item_id]').val(itemId);
            itemId === '61' ? $('#log-weather').addClass('hidden') : $('#log-weather').removeClass('hidden');
            ajax('post', 'itemData', params, getItemDataBak, 0);

            function getItemDataBak(res) {
                if (res.code == 0) {
                    layer.msg(res.msg);
                    return false;
                }
                //检验标准
                let cond = res.data.condition, condStr = '';
                for (let index in cond) {
                    let val = cond[index];
                    condStr += ' <b>' + val.key + '</b>：' + val.val + val.unit + '&nbsp;';
                }
                condStr += '&nbsp;<b>要求</b>：' + res.data.yaoqiu;
                $('#test-stad').html(condStr);
                // 分配时间
                $('#allot-time').html(res.data.allot_time);
                // 原始记录--试验数据
                let testdata_key = res.data.testdata_key, testdataKeyStr = '';
                for (let index in testdata_key) {
                    let val = testdata_key[index];
                    testdataKeyStr += '<div class="row cl">' +
                        ' <label class="form-label col-xs-3"><b>' + val.data_key + '</b>：</label>' +
                        '<div class="col-xs-7"><input class="input-text required" name="testKey['+val.id+']"></div>' +
                        '<label class="col-xs-2 t-a-l">' + val.data_unit + '</label>' +
                        '</div>';
                }
                $('#log-item').html(testdataKeyStr);
            }
        }

        /*表格重新加载*/
        function table_reload(bool) {
            if (bool) {
                //true时，跳到第一页
                table.ajax.reload();
            } else {
                //false时，停留在原来页
                table.ajax.reload(null, false);
            }
        }


        /*查看 分配结果*/
        function view(id, w, h) {
            layer_show('分配结果', '/{{config('constant.name_admin')}}/myapi/viewAssignRes?id=' + id, w, h);
        }

    </script>
@endsection
